<template>
  <div class="article-container">
    <!-- 文章正文区域 -->
    <div class="article-main">
      <div class="header">
        <el-button type="danger" round @click="logout">返回主页</el-button>
        <h1 class="article-title">{{ article.articletitle }}</h1>
      </div>
      <div class="article-info">
        <el-avatar :src="article.userphoto" :size="30"></el-avatar>
        <span class="article-author">{{ article.useraccount }}</span>
        <span class="article-time">{{ article.articletype }}</span>
      </div>
      <div class="article-content">{{ article.articlemain }}</div>
      <div class="article-images">
        <el-image :src="article.articleimg"></el-image>
      </div>
    </div>

    <!-- 文章评论区 -->
    <h2 class="comment-title">评论区</h2>
    <div class="comment-list">
      <el-card v-for="remark in remarklist" :key="remark.id" class="comment-item">
        <div class="comment-header">
          <el-avatar :src="remark.userphoto" :size="30"></el-avatar>
          <span class="comment-author">{{ remark.account }}</span>
        </div>
        <div class="comment-body">{{ remark.articletext }}</div>
      </el-card>
    </div>

    <div class="comment-input">
      <el-input
          placeholder="请输入评论内容"
          v-model="form.articletext"
          class="comment-input-box"
      ></el-input>
      <el-button type="primary" @click="addremark">发送</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Articledetails",
  data(){
    return{
        //接收当前登录用户的信息
        user:{},
        //从主页传过来的id
        articleid : 0,
        //接受后端传过来的文章内容
        article : {},
        //接受后端传回的该文章的评论
        remarklist : [],
        //评论内容
        form : {
            articletext : '',
            userid : 0,
            articleid : 0
        },
    }
    },
    created(){
        this.user = JSON.parse(window.sessionStorage.getItem("user"));
        this.articleid = localStorage.getItem("articleid");
        this.articleById();
        this.getremark();
    },
    methods : {
      logout(){
        //清空token
        //window.sessionStorage.clear();
        //跳转到登录页面
        this.$router.push({
          name:'chat'
        })
      },
      //发布评论方法
        addremark(){
            this.form.articleid = this.articleid;
            this.form.userid = this.user.id;
            if(this.articletext == ''){
                return this.$message.error("请输入评论！")
            }
            this.$http.post('/remark',this.form).then(res=>{
                if(res.data.status == 200){
                    this.form.articletext = '';
                    this.$message.success("评论成功！");
                    this.getremark();  
                }else{
                    this.$message.error("评论失败！");
                }
            })
        },
        //获取文章评论内容
        getremark(){
            this.$http.get('/remark/list/'+this.articleid).then(res=>{
                if(res.data.status == 200){
                    this.remarklist  = res.data.data;
                }else{
                    this.$message.error(res.data.message)
                }
            })
        },
        //获取文章内容
        articleById(){
            this.$http.get('/article/'+this.articleid).then(res=>{
                if(res.data.status == 200){
                    this.article = res.data.data;
                }else{
                    this.$message.error(res.data.message);
                }
            })
        }
    }
}
</script>

<style>

.article-container {
  width: 88%;
  margin: 0 auto;
  margin-top: -13px;
  background-color: #cdf0fd39;
  padding: 20px;
}

.article-main {
  margin-bottom: 20px;
}

.header {
  display: flex;
  align-items: center;
  height: 100px;
}

.el-button {
  flex: 0;
  margin-right: 20px;
}

.article-title {
  flex: 1;
  font-size: 30px;
  text-align: center;
}

.article-info {
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #999;
}

.article-author {
  margin-right: 10px;
  font-weight: bold;
}

.article-content {
  margin-top: 20px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.article-images {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.comment-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.comment-list {
  margin-bottom: 20px;
}

.comment-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  margin-left: 10px;
  font-weight: bold;
}

.comment-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-input {
  display: flex;
  align-items: center;
}

.comment-input-box {
  width: 100%;
  margin-right: 10px;
}
</style>